import React, { useEffect, useState } from 'react';
import './detail.scss'
import * as service from '../../../../api/tzp'
import { useParams } from 'react-router-dom';
<<<<<<< HEAD
import {Table ,Drawer,Form,Input,Select,Tree,Button,Modal} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { RadioChangeEvent } from 'antd';
import { use } from 'echarts';
=======
import {Table ,Drawer,Form,Input,Select,Tree,Button,Radio} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { RadioChangeEvent } from 'antd';
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e


interface DataType {
    key: string;
    id: number, 
    vip: string,
    name: string,
    phone:string,
    flag:number,
    num:number,
    money:number,
    time:string
}
function Detail(props:any) {
    var [form] = Form.useForm()
    let params = useParams()
    // 获取用户详情
    var [tableData,setTableData] = useState<any>([])
      var user = async ()=>{
        var res = await service.user_detail(params)
        console.log(res);
        setTableData(res.data)
      }
      useEffect(()=>{
        user()
        users()
      },[])

       //   请求用户列表
    var [tableDatas,setTableDatas] = useState<DataType[]>([])
    var users = async ()=>{
      var res = await service.user_list()
      console.log(res);
      setTableDatas(res.data)
    }
        //表格列表的配置
    const columns: ColumnsType<any> = [
        {
            title: '操作时间', 
            dataIndex: 'time', 
            key: 'time',
            align: 'center',
            render: ( _ ,record) => <div className='user'>{record.time}</div>,
        },
        {
            title: '操作前成长值', 
            dataIndex: 'money', 
            key: 'money',
            align: 'center',
            render: ( _ ,record) => <div className='user'>{record.money}</div>,
        },
        {
            title: '成长值数值', 
            dataIndex: 'sum', 
            key: 'sum',
            align: 'center',
            render: ( _ ,record) => <div className='user' style={{color:'gress'}}>+200</div>,
        },
        {
            title: '操作后成长值', 
            dataIndex: 'result', 
            key: 'result',
            align: 'center',
            render: ( _ ,record) => <div className='user'>4200</div>,
        },
        {
            title: '成长值原因', 
            dataIndex: 'yin', 
            key: 'yin',
            align: 'center',
            render: ( _ ,record) => <div className='user'>APP签到</div>,
        },
        {
            title: '备注', 
            dataIndex: 'bei', 
            key: 'bei',
            align: 'center',
            render: ( _ ,record) => <div className='user'>无</div>,
        },
       
       
    ]
    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        console.log(params);
<<<<<<< HEAD
        var res = await service.user_edit({id:params.id,name:formvalues.name,phone:formvalues.phone,age:formvalues.age,wx:formvalues.wx,occupation:formvalues.occupation,address:formvalues.address,})
        onClose()
        var res = await service.user_detail(params)
        setTableData(res.data)
    }
    var [open, setOpen] = useState<boolean>(false);
    var onClose = () => {
        setOpen(false);    }
=======
        var res = await service.user_edit({id:params.id,sex:value})
        onClose()
        var res = await service.user_list()
        setTableDatas(res.data)
    }
    var [open, setOpen] = useState<boolean>(false);
    var onClose = () => {
        setOpen(false);
        form.setFieldsValue({ adminid: '', adminname: '', role: '', password: '', checkedKeys: '[]' })
    }
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e
    var updataUser = (tableData:any) => {
        console.log(tableData);
        setOpen(true);
        form.setFieldsValue(tableData)
<<<<<<< HEAD
    }
    const [modal2Open, setModal2Open] = useState(false);
    // 修改成长值
    var [viptext ,setViptext] = useState()
    var vip = async(e:any)=>{
        setViptext(e.target.value)
    }
    var OK = async()=>{
        setModal2Open(false)
        if(boolean == false){
            var ress = await service.user_edit({id:tableData.id,Integral:viptext})
        }else if (boolean == true){
            var ress = await service.user_edit({id:tableData.id,money:viptext})
        }
        
        var res = await service.user_detail(params)
        console.log(res);
        setTableData(res.data)
    }
    const [boolean,setboolean]=useState(false)
    var Integrals = ()=>{
        setModal2Open(true)
        setboolean(false)
    }
    var moneys = ()=>{
        setModal2Open(true)
        setboolean(true)
    }
=======
        setValue(tableData.sex)

    }
    // 性别
    const [value, setValue] = useState('男');
    const onChange = (e: RadioChangeEvent) => {
        console.log(e.target.value);
        setValue(e.target.value);
      };
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e
    return (
        <div className='detail'>
             <div className='title-box'>
                <div className='title-top'>用户管理 / 用户查询 /用户详情</div>
                <div className='title-bottom'>用户详情</div>
            </div>
            <div className='detail-title'>基础资料</div>
            <div className='detail-box'> 
                <div className='box-left'>
                    <img src="https://cdn7.axureshop.com/demo/1903216/images/%E7%9B%B4%E6%92%AD%E6%95%B0%E6%8D%AE/u2428.svg" alt="" />
                    <div onClick={()=>{updataUser(tableData)}}>编辑资料</div>
                </div>
                <div className='box-right'>
                    <ul>
                        <li>
                            <span>用户姓名: {tableData.name}</span>
                            <span>用户性别: {tableData.sex}</span>
                            <span>用户职业: {tableData.occupation}</span>
                            <span>来源方式: APP</span>
                            <span>备注：无</span>
                        </li>
                        <li>
                            <span>手机号: {tableData.phone}</span>
                            <span>用户年龄: {tableData.age}</span>
                            <span>常用收货人: {tableData.name}</span>
                            <span>注册时间：{tableData.time}</span>
                           
                        </li>
                        <li>
                            <span>用户ID: {tableData.id}</span>
                            <span>微信号: {tableData.wx}</span>
                            <span>详细地址: {tableData.address}</span>
                            <span>最近登录时间: {tableData.time}</span>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <div className='asset'>
                <div className='asset-title'>用户资产</div>
                <div className='asset-list'>
                    <div className='list_box'>
                        <p>累计积分</p>
                        <p>{tableData.Integral}</p>
                        <p onClick={() => {Integrals()}}>修改积分</p>
                    </div>
                    <div className='list_box'>
                        <p>累计成长值</p>
                        <p>{tableData.money}</p>
                        <p onClick={() => {moneys()}}>修改成长值</p>
                    </div>
                    <div className='list_box'>
                        <p>付费会员卡</p>
                        <p>年度大会员</p>
                        <p>查看</p>
                    </div>
                    <div className='list_box'>
                        <p>会员等级</p>
                        <p>{tableData.vip}</p>
                        <p>查看</p>
                    </div>
                </div>
            </div>
            <div className='behavior'>
                <div className='behavior-title'>行为统计</div>
                <div className='behavior-list'>
                    <div className="list-box">
                        <p>下单数量</p>
                        <p>{tableData.num}</p>
                    </div>
                    <div className="list-box">
                        <p>下单金额（元）</p>
                        <p>{tableData.money}</p>
                    </div>
                    <div className="list-box">
                        <p>最近消费时间</p>
                        <p>{tableData.time}</p>
                    </div>
                    <div className="list-box">
                        <p>今日学习时长(h)</p>
                        <p>6</p>
                    </div>
                    <div className="list-box">
                        <p>学习总时长(h)</p>
                        <p>600</p>
                    </div>
                    <div className="list-box">
                        <p>学习总课程数量</p>
                        <p>6</p>
                    </div>
                    <div className="list-box">
                        <p>完成总课程数量</p>
                        <p>2</p>
                    </div>
                </div>
            </div>
            <div className='Recording'>
                <div className='Recording-title'>积分记录</div>
                <Table columns={columns} dataSource={tableDatas} style={{marginTop:20}} rowKey="id"/>
            </div>
            <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
            <Form
                        // className='from-box'
                        form={form}
                        // labelCol={{ span: 4 }}
                        wrapperCol={{ span: 14 }}
                        layout="horizontal"
                        style={{ maxWidth: 600 }}
                        onFinish={onFinish}
                    >
                        <Form.Item 
                            label="用户姓名" 
                            name="name"
                            >
<<<<<<< HEAD
                            <Input placeholder='请输入' 
                            disabled/>
=======
                            <Input placeholder='请输入'/>
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e
                        </Form.Item>
                        <Form.Item 
                            label="联系方式" 
                            name="phone"
                            >
                            <Input placeholder='请输入'/>
                        </Form.Item>
<<<<<<< HEAD
                        <Form.Item 
=======
                        <Radio.Group className='checked-box' onChange={onChange} value={value} >
                            <Radio value={'男'}>男</Radio>
                            <Radio value={'女'}>女</Radio>
                        </Radio.Group>
                        <Form.Item 
                        
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e
                            label="用户年龄" 
                            name="age"
                            >
                            <Input placeholder='请输入'/>
                        </Form.Item>
                        <Form.Item 
                            label="用户微信" 
                            name="wx"
                            >
                            <Input placeholder='请输入'/>
                        </Form.Item>
                        <Form.Item 
                            label="用户职业" 
                            name="occupation"
                            >
                            <Input placeholder='请输入'/>
                        </Form.Item>
                        <Form.Item 
                            label="详细地址" 
                            name="address"
                            >
                            <Input placeholder='请输入'/>
                        </Form.Item>
                        <Form.Item  >
                            <Button htmlType="submit">修改</Button>
                        </Form.Item>
                    </Form>
            </Drawer>
<<<<<<< HEAD
            <Modal
                title="Vertically centered modal dialog"
                centered
                open={modal2Open}
                onOk={() => {OK()}}
                onCancel={() => setModal2Open(false)}
            >
                <Input placeholder='请输入' onChange={(e)=>{vip(e)}}/>
            </Modal>
=======
>>>>>>> 4dc7408c1bcb6ff0ec360103d3a141bafa1cdc9e
        </div>
    );
}

export default Detail;